<template>
  <div class="detail_wrap">
    <div class="flex mb10 flex_h_between">
      <div class="info_text cursor" @click="back"><a-icon type="left" />返回</div>
    </div>
    <div class="activity_title">{{ detail.name }}</div>
    <div class="activity_tip">视频制作：{{detail.author}}&nbsp;&nbsp;&nbsp;&nbsp;来源：小航家公益教育服务平台&nbsp;&nbsp;&nbsp;&nbsp;日期：{{moment(detail.dateCreated).format('YYYY-MM-DD HH:mm:ss')}}</div>
    <div class="video_text">
      <video id="myVideo" class="video-js">
        <source :src="videoSrc" type="video/mp4">
      </video>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { videoDetail } from '@/api/config'
export default {
  name: 'videoDetail',
  components: { },
  data () {
    return {
      moment,
      detail: {},
      videoSrc: '',
      myPlayer: null
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  watch: {
  },
  async mounted () {
    await this.getDetail()
    this.initVideo()
  },
  destroyed () {
    this.myPlayer.dispose()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getDetail () {
      let res = await videoDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
        this.videoSrc = '/sysFile/fileShow?url=' + res.data.filePath.replaceAll('\\', '/')
      }
    },
    initVideo () { // 初始化视频方法
      this.myPlayer = this.$video('myVideo', {
        // 是否显示控制栏
        controls: true,
        // 是否自动播放,muted:静音播放
        autoplay: false,
        // 是否静音播放
        muted: false,
        // 是否流体自适应容器宽高
        fluid: true,
        // 设置视频播放器的显示宽度(以像素为单位)
        width: '800px',
        // 设置视频播放器的显示高度(以像素为单位)
        height: '40px'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.detail_wrap
  padding 20px 30px
  background #fff
  min-height calc(100vh - 107px)
  .activity_title
    text-align: center;
    font-weight: 600;
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
  .activity_tip
    font-size: 14px;
    color: #666;
    padding-bottom: 20px
    border-bottom: 1px solid #e5e5e5;
.video_text{
  width: 90%;
  margin: 20px auto;
}
video:focus{
  outline: 0; // 去掉选中蓝框
}
.video-js .vjs-big-play-button{
  /*对播放按钮的样式进行设置*/
  width: 100px;
  height: 60px;
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate3d(-50%,-50%,0);
}
</style>
